<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .fav-nav-active {
                @apply text-primary border-primary font-medium;
            }
            .hide-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .hide-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <button class="relative text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-star text-xl"></i>
                    <span
                        class="absolute -top-1 -right-1 w-4 h-4 bg-primary text-white text-xs rounded-full flex items-center justify-center">5</span>
                </button>
                <button
                    class="hidden md:block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    <i class="fa fa-user-plus mr-1"></i> 登录
                </button>
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="py-10 bg-gradient-to-b from-white to-gray-50 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-gradient">我的收藏</h1>
                <p class="text-gray-600">管理您收藏的优质资源和实用工具</p>
            </div>
        </div>
    </section>

    <!-- 收藏内容区 -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-5xl mx-auto">
                <!-- 收藏导航 -->
                <div class="bg-white rounded-xl shadow-sm mb-8">
                    <div class="flex flex-wrap border-b border-gray-100">
                        <button class="fav-nav-active px-6 py-4 text-sm transition-colors border-b-2">
                            全部收藏
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            资源收藏
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            工具收藏
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            社区帖子
                        </button>
                    </div>
                </div>

                <!-- 收藏筛选 -->
                <div
                    class="bg-white rounded-xl shadow-sm p-4 mb-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div class="flex items-center space-x-2 w-full sm:w-auto">
                        <span class="text-gray-600">共 <span class="text-primary font-medium">12</span> 个收藏</span>
                    </div>
                    <div class="flex flex-wrap gap-2 w-full sm:w-auto">
                        <div class="relative">
                            <select
                                class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm">
                                <option>最近收藏</option>
                                <option>最早收藏</option>
                                <option>按名称排序</option>
                            </select>
                            <i
                                class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                        </div>
                        <button
                            class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-sm flex items-center">
                            <i class="fa fa-trash-o mr-2 text-gray-500"></i> 批量删除
                        </button>
                    </div>
                </div>

                <!-- 收藏列表 -->
                <div class="space-y-4 mb-8">
                    <!-- 收藏项1 - 资源 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="p-5 flex flex-col md:flex-row gap-4">
                            <div class="w-full md:w-16 flex-shrink-0">
                                <div
                                    class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
                                    <i class="fa fa-code"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-1">
                                    <h3 class="font-semibold text-gray-800">在线代码编辑器</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> 2023-10-15</span>
                                        <span
                                            class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">开发工具</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 text-sm mb-3">无需安装，在线编写和运行多种编程语言代码，支持实时预览</p>
                                <div class="flex flex-wrap justify-between items-center gap-3">
                                    <a href="#" class="text-primary text-sm hover:underline flex items-center">
                                        访问资源 <i class="fa fa-external-link ml-1"></i>
                                    </a>
                                    <div class="flex items-center gap-3">
                                        <button
                                            class="text-gray-500 hover:text-red-500 transition-colors text-sm flex items-center">
                                            <i class="fa fa-star text-yellow-400 mr-1"></i> 取消收藏
                                        </button>
                                        <button
                                            class="text-gray-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 收藏项2 - 工具 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="p-5 flex flex-col md:flex-row gap-4">
                            <div class="w-full md:w-16 flex-shrink-0">
                                <div
                                    class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600">
                                    <i class="fa fa-font"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-1">
                                    <h3 class="font-semibold text-gray-800">图片加水印</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> 2023-10-10</span>
                                        <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">图片工具</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 text-sm mb-3">为图片添加文字或图片水印，保护知识产权</p>
                                <div class="flex flex-wrap justify-between items-center gap-3">
                                    <a href="#" class="text-primary text-sm hover:underline flex items-center">
                                        开始使用 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                    <div class="flex items-center gap-3">
                                        <button
                                            class="text-gray-500 hover:text-red-500 transition-colors text-sm flex items-center">
                                            <i class="fa fa-star text-yellow-400 mr-1"></i> 取消收藏
                                        </button>
                                        <button
                                            class="text-gray-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 收藏项3 - 资源 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="p-5 flex flex-col md:flex-row gap-4">
                            <div class="w-full md:w-16 flex-shrink-0">
                                <div
                                    class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
                                    <i class="fa fa-paint-brush"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-1">
                                    <h3 class="font-semibold text-gray-800">免费UI设计模板</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> 2023-09-28</span>
                                        <span
                                            class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">设计资源</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 text-sm mb-3">精选高质量UI设计模板，可直接下载使用，支持Figma和Sketch</p>
                                <div class="flex flex-wrap justify-between items-center gap-3">
                                    <a href="#" class="text-primary text-sm hover:underline flex items-center">
                                        访问资源 <i class="fa fa-external-link ml-1"></i>
                                    </a>
                                    <div class="flex items-center gap-3">
                                        <button
                                            class="text-gray-500 hover:text-red-500 transition-colors text-sm flex items-center">
                                            <i class="fa fa-star text-yellow-400 mr-1"></i> 取消收藏
                                        </button>
                                        <button
                                            class="text-gray-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 收藏项4 - 工具 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="p-5 flex flex-col md:flex-row gap-4">
                            <div class="w-full md:w-16 flex-shrink-0">
                                <div
                                    class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                    <i class="fa fa-indent"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-1">
                                    <h3 class="font-semibold text-gray-800">JSON格式化</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> 2023-09-15</span>
                                        <span
                                            class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">开发工具</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 text-sm mb-3">格式化JSON数据，使代码更易读，支持压缩和验证</p>
                                <div class="flex flex-wrap justify-between items-center gap-3">
                                    <a href="#" class="text-primary text-sm hover:underline flex items-center">
                                        开始使用 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                    <div class="flex items-center gap-3">
                                        <button
                                            class="text-gray-500 hover:text-red-500 transition-colors text-sm flex items-center">
                                            <i class="fa fa-star text-yellow-400 mr-1"></i> 取消收藏
                                        </button>
                                        <button
                                            class="text-gray-500 hover:text-primary transition-colors text-sm flex items-center">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="flex justify-center mt-10">
                    <nav class="inline-flex rounded-md shadow-sm -space-x-px">
                        <a href="#"
                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fa fa-chevron-left"></i>
                        </a>
                        <a href="#" aria-current="page"
                            class="relative inline-flex items-center px-4 py-2 border border-primary bg-primary text-sm font-medium text-white">
                            1
                        </a>
                        <a href="#"
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            2
                        </a>
                        <a href="#"
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                        </a>
                        <span
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        <a href="#"
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            5
                        </a>
                        <a href="#"
                            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>

                <!-- 空收藏状态 (默认隐藏) -->
                <div class="hidden bg-white rounded-xl shadow-sm p-10 text-center" id="emptyFavorites">
                    <div
                        class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mx-auto mb-4">
                        <i class="fa fa-star-o text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">暂无收藏</h3>
                    <p class="text-gray-600 mb-6 max-w-md mx-auto">您还没有收藏任何资源或工具，快去浏览并收藏感兴趣的内容吧！</p>
                    <a href="index.html"
                        class="inline-block px-6 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        浏览资源 <i class="fa fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="community.html" class="text-gray-400 hover:text-white transition-colors">社区交流</a>
                        </li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">团队成员</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }

            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 收藏分类切换
        const categoryButtons = document.querySelectorAll('.fav-nav-active, .flex.flex-wrap.border-b button:not(.fav-nav-active)');
        categoryButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有按钮的活跃状态
                categoryButtons.forEach(btn => {
                    btn.classList.remove('fav-nav-active');
                    btn.classList.add('border-transparent', 'text-gray-600', 'hover:text-gray-900');
                });

                // 设置当前按钮为活跃状态
                button.classList.add('fav-nav-active');
                button.classList.remove('border-transparent', 'text-gray-600', 'hover:text-gray-900');

                // 这里可以添加切换不同分类收藏的逻辑
                const category = button.textContent.trim();
                console.log('切换到:', category);
            });
        });

        // 取消收藏功能
        const unfavoriteButtons = document.querySelectorAll('button:has(.fa-star)');
        unfavoriteButtons.forEach(button => {
            button.addEventListener('click', () => {
                const favoriteItem = button.closest('.card-hover');
                const resourceName = favoriteItem.querySelector('h3').textContent;

                if (confirm(`确定要取消收藏"${resourceName}"吗？`)) {
                    favoriteItem.classList.add('opacity-0', 'scale-95');
                    favoriteItem.style.transition = 'all 0.3s ease';

                    setTimeout(() => {
                        favoriteItem.remove();

                        // 检查是否还有收藏项
                        const remainingItems = document.querySelectorAll('.card-hover');
                        if (remainingItems.length === 0) {
                            document.getElementById('emptyFavorites').classList.remove('hidden');
                        }
                    }, 300);
                }
            });
        });
    </script>
</body>

</html>